<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大图管理</title>
    <link rel="stylesheet" href="/static/layui/layer/theme/default/layer.css">
  <link href="https://cdn.bootcss.com/jquery-jcrop/0.9.12/css/jquery.Jcrop.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.css">
    <link rel="stylesheet" href="/static/css/admin/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/header.css">
    <style>
        .coop-img {
            margin: 5px 0;
            height: 140px;
            text-align: center;
            box-shadow: 0 1px 3px 1px #ccc;
            border-radius: 3px;
        }
        .coop-img > div {
            padding-top: 12px;
            cursor: pointer;
            color: #cdcdcd;
        }
    </style>

</head>
<body>
<div id="upImg" style="display: none;">
    <input type="file" class="hide" accept="image/*">
    <div style="padding: 5px;">
        <img id="crop" src="" width="100%">
        <button onclick="upImg()" style="margin-top: 5px;"
                class="btn btn-info btn-group-justified">保存</button>
    </div>
</div>
<div id="wrapper">
    #include('left.html')
    <div class="overlay"></div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>
        <div class="container">
            <div>
                <!-- 页面选项卡标题 -->
                <div class="col-lg-12 col-xs-12">
                    <h4 class="pull-left" style="padding: 10px 5px;"><span class="fa fa-hand-o-right"></span> 主页大图管理</h4>
                    <div class="pull-right" style="margin: 15px 0;">
                        <button onclick="addBigImg()" class="btn btn-success btn-sm">添加大图</button>
                    </div>
                </div>
                <div class="col-lg-12 col-xs-12">
                    <image-box v-for="(image, index) in images" :key="index+1"
                               :image="image" :index="index"/>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
</div>
<template id="image-box">
    <div class="col-lg-4 col-xs-6">
        <div class="thumbnail">
            <img :id="image.id" alt="主页大图" style="width: 100%;"
                 :src="image.path"/>
            <div class="caption text-center">
                <button class="deleteImg btn btn-sm btn-danger" @click="delete_">删除</button>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript" src="/static/js/admin/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
<script src="/static/layui/layer/layer.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.js"></script>
<script type="text/javascript" src="/static/js/admin/bootstrap.js"></script>
<script type="text/javascript" src="/static/js/admin/open_close.js"></script>
<script type="text/javascript">
    var imgVm = new Vue({
      el: '#page-content-wrapper',
      data: {
        images: []
      },
      methods: {
        getImages: function () {
          var self = this;
          $.post('/admin/bigImage/page', {page: 1, size: 100}, function (data) {
            if (data.success) {
              self.images = data.payload.rows;
            }
          });
        }
      },
      components: {
        'image-box': {
          props: ['image', 'index'],
          template: '#image-box',
          methods: {
            delete_: function () {
              var self = this;
              $.post('/admin/bigImage/delete/'+self.image.id, function (data) {
                if (data.success) {
                  self.$root.images.splice(self.index, 1);
                  layer.msg('删除成功！', {time: 1200});
                }
              });
            }
          }
        }
      },
      created: function () {
        this.getImages();
      }
    });


    function addBigImg() {
      var imgin = $('#upImg input');
      var img = $('#upImg img')[0];
      img.src = null;
      imgin.on('change', function (e) {
        var ins = e.target;
        if (ins.files != null) {
          var file = ins.files[0];
          if (file != null) {
            img.src = window.URL.createObjectURL(file);
            layer.open({
              title: '图片剪裁',
              type: 1,
              offset: '80px',
              area: '475px',
              content: $('#upImg'),
              cancel: function (index) {
                location.reload();
              }
            });
            jcrop();
          }
        }
      });
      imgin.click();
    }

    var x = 0,y = 0,w = 475,h = 180;
    function jcrop() {
      var jc;
      $('#crop').Jcrop({
        aspectRatio: 95/36,
        minSize: [317, 120],
        onRelease: function () {
          this.setSelect([x, y, w, h]);
        },
        onSelect: function (c) {
          x = c.x;
          y = c.y;
          w = c.w;
          h = c.h;
        }
      }, function () {
        jc = this;
        jc.animateTo([x, y, w, h]);
      });
    }

    function upImg() {
      var img = document.getElementById("crop");
      var cv  = document.createElement("canvas");
      var sw  = parseInt(img.style.width.replace("px", ""));
      var rt  = img.naturalWidth / sw;
      cv.width = w;
      cv.height = h;
      var ctx = cv.getContext("2d");
      ctx.drawImage(img, x * rt, y * rt, w * rt, h * rt,
          0, 0, w, h);
      cv.toBlob(function (blob) {
        var fd = new FormData();
        fd.append('type', 'image');
        fd.append("file", blob, "file.png");

        var xhr = new XMLHttpRequest();
        xhr.open("post", "/file/t/upload", true);
        xhr.onload = function (e) {
          var data = JSON.parse(xhr.responseText);
          console.log(data);
          if (data.success) {
            imgVm.images.unshift(data.payload);
            location.reload();
          }
        };
        xhr.send(fd);
      });
    }
</script>
</body>
</html>
